import { Button, Divider, Input, Select, Table, Tag } from "antd";
import { observer } from "mobx-react-lite";
import { FC } from "react";
import TableInfoStore, { IndexInfoProps } from "../tableInfoStore";
import { DeleteOutlined } from "@ant-design/icons";

const { Option } = Select;

const IndexList: FC = () => {
    const {
        indexInfoList,
        setIndexInfoList,
        indexInfoKeys,
        addIndexInfoRow,
        deleteIndexInfoItem,
        fieldInfoList,
        canEditIndexInfo
    } = TableInfoStore;

    const selectData = fieldInfoList.map(item => ({
        label: item.name,
        value: item.code
    }));

    const indexTypes = [
        { value: 'INDEX', label: '普通索引' },
        { value: 'UNIQUE', label: '唯一索引' },
    ];

    const handleFieldChange = (index: number, field: keyof IndexInfoProps, value: any) => {
        const newList = [...indexInfoList];
        newList[index] = { ...newList[index], [field]: value };
        setIndexInfoList(newList);
    };

    const columns = [
        {
            title: '操作',
            key: 'action',
            width: 90,
            render: (_, record, index) => (
                <>
                    <Button
                        type="link"
                        danger
                        size="small"
                        onClick={() => deleteIndexInfoItem(index)}
                        icon={<DeleteOutlined />}
                    />
                    <Divider type="vertical" />
                    <span
                        className="e_icon"
                        onClick={() => canEditIndexInfo(record.id!)}
                        style={{ cursor: 'pointer', color: '#1890ff' }}
                    >
                        编辑
                    </span>
                </>
            ),
        },
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 120,
        },
        {
            title: '字段名称',
            dataIndex: 'filedName',
            key: 'filedName',
            width: 150,
            render: (text: string[], record, index) => (
                indexInfoKeys.includes(record.id!) ? (
                    <Select
                        mode="multiple"
                        style={{ width: '100%' }}
                        value={text}
                        onChange={(value) => handleFieldChange(index, 'filedName', value)}
                    >
                        {selectData.map(item => (
                            <Option key={item.value} value={item.value}>
                                {item.label}
                            </Option>
                        ))}
                    </Select>
                ) : (
                    text?.map(code => {
                        const field = fieldInfoList.find(f => f.code === code);
                        return field ? <Tag key={code}>{field.name}</Tag> : null;
                    })
                )
            ),
        },
        {
            title: '备注',
            dataIndex: 'comment',
            key: 'comment',
            width: 150,
            render: (text, record, index) => (
                indexInfoKeys.includes(record.id!) ? (
                    <Input
                        value={text}
                        onChange={(e) => handleFieldChange(index, 'comment', e.target.value)}
                    />
                ) : (
                    text
                )
            ),
        },
        {
            title: '索引类型',
            dataIndex: 'indexType',
            key: 'indexType',
            width: 120,
            render: (text, record, index) => (
                indexInfoKeys.includes(record.id!) ? (
                    <Select
                        value={text}
                        style={{ width: '100%' }}
                        onChange={(value) => handleFieldChange(index, 'indexType', value)}
                    >
                        {indexTypes.map(item => (
                            <Option key={item.value} value={item.value}>
                                {item.label}
                            </Option>
                        ))}
                    </Select>
                ) : (
                    indexTypes.find(t => t.value === text)?.label || text
                )
            ),
        },
    ];
    console.log("这是indexList-------")

    return (
        <>
            <Table
                rowKey="id"
                columns={columns}
                dataSource={indexInfoList}
                pagination={false}
                size="small"
                bordered
            />
            <Button
                style={{ marginTop: 16, width: '100%' }}
                type="dashed"
                onClick={addIndexInfoRow}
            >
                + 增加一行数据
            </Button>
        </>
    );
};

export default observer(IndexList);